<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>百度地图测试</title>
    <style type="text/css">
      html {
        height: 100%;
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }

      #container {
        height: 600px;
        width: 800px;
      }

      .anchorBL {
        display: none;
      }

      .BMap_stdMpZoom {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        // callback 定义 加载后 执行的函数
        script.src =
          "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yvu4YGW9MmqqgipzLiiwtX6Yk7SvIFSF&callback=init";
        document.body.appendChild(script);
      }
      function init() {
        // console.log(window.BMapGL)  // 地图对象
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915); // 北京市中心坐标点
        map.centerAndZoom(point, 10, {
          minZoom: 5,
          maxZoom: 14,
          mapType: BMAP_NORMAL_MAP,
        }); // 显示地图, 传入 中心点 与 MapOption
        map.enableScrollWheelZoom(true); // 允许滚轮放大
        map.setMapStyleV2({
          styleId: "a00d449906ae434fbdd20c6c8c242316",
        });
        map.setHeading(0);
        map.setTilt(0);
        // 添加缩放控件
        var zoomCtrl = new BMapGL.ZoomControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        });
        // 添加缩放控件
        map.addControl(zoomCtrl);
        // 添加事件
        map.addEventListener("zoomstart", function() {
          console.log(map.getZoom()); // 返回 zoom前的值
        });
        // 添加控件 标尺
        var scaleCtrl = new BMapGL.ScaleControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          offset: new BMapGL.Size(10, 10),
        });
        map.addControl(scaleCtrl);

        // 添加 图标
        // 1. 添加 icon
        var myIcon = new BMapGL.Icon(
          "https://www.youbaobao.xyz/datav-res/datav/location.png", // 图片
          new BMapGL.Size(60, 60), // 尺寸
          {
            anchor: new BMapGL.Size(0, 0), // 图标的定位点相对于图标左上角的偏移值
          }
        );
        // 2. 添加 marker
        var marker = new BMapGL.Marker(point, { icon: myIcon });
        marker.addEventListener("click", function() {
          // 传入 html字符串也可以， 可以带 css
          var infoWindow = new BMapGL.InfoWindow("我要学习", {
            width: 250,
            title: "说明",
          });
          map.openInfoWindow(infoWindow, point);
        });
        // 3. 添加 marker 到地图
        map.addOverlay(marker);

        // 添加 线段
        var polyline = new BMapGL.Polyline(
          [
            new BMapGL.Point(116.399, 39.8),
            new BMapGL.Point(116.455, 39.82),
            new BMapGL.Point(116.755, 39.42),
          ],
          { strokeColor: "red" }
        );
        map.addOverlay(polyline);

        // 添加 文本
        var label = new BMapGL.Label("欢迎欢迎，热烈欢迎", {
          position: point,
        }); // 默认红框白底黑字，左上角
        map.addOverlay(label);
        // 通过css 修改文本样式
        label.setStyle({
          width: "180px",
        });
        // 添加事件
        label.addEventListener("click", function(e) {
          alert(e.target.content);
        });
      }
      window.onload = loadJScript; //异步加载地图
    </script>
  </body>
</html>
